<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
    }
    .out {
      background-color: blue;
      width: 100%;
      margin-left: 10px;
      margin-right: 10px;
      text-align: center;
      font-size: 20px;
    }
    .in {
      /* padding 百分比 相对于自己的宽度来计算 */
      padding: 25% 0;
      height: 0;
    }
    /* position: 
    absolute：第一个非 static 定位的祖先元素，如果没有就相对视窗
    relative：相对自身
    fixed:  相对于视窗
    static:  默认布局，不加 position 默认就是 static
    sticky:  粘性，比如滑出一定的距离之后固定(fixed) */
  </style>
</head>
<body>
  <div class="out">
    <div class="in">
      A
    </div>
  </div>
  <script>
    function foo() {
      // arguments 类数组对象转成真正的数组
      console.log(arguments);
      console.log(Array.from(arguments));
      console.log([...arguments]);
      // 借用数组的方法
      console.log(Array.prototype.slice.call(arguments));
      console.log(Array.prototype.splice.call(arguments, 0));
    }
    foo(1, 2, 3, 4, 5);
    // 基本数据类型 - 变量和变量对应的值都存储在栈中
    // 复杂数据类型 - 变量存储在栈内存，值存储在堆内存中
    // 不严格相等 == 和严格相等 === 转换规则 -> MDN
    let a = [1], b = [1], c = 4, d = 4;
    c == d; // true
    a == b; // false
    // a、b 存储在栈中，存储的是指向堆内地址的指针
    // c、d 都存储在栈中
  </script>
</body>
</html>